<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FinanceApp - 用户界面原型</title>
    <style>
        /* 赛博朋克霓虹风格设计 */
        :root {
            --primary-color: #0ff;
            --secondary-color: #f0f;
            --background-color: #0a0a1a;
            --card-bg: #111122;
            --text-color: #fff;
            --accent-color: #ff0055;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--background-color);
            color: var(--text-color);
            line-height: 1.6;
        }
        
        /* 霓虹效果 */
        .neon-text {
            text-shadow: 
                0 0 5px var(--primary-color),
                0 0 10px var(--primary-color),
                0 0 20px var(--primary-color),
                0 0 40px var(--primary-color);
        }
        
        .neon-border {
            box-shadow: 
                0 0 5px var(--primary-color),
                0 0 10px var(--primary-color);
        }
        
        .neon-accent {
            box-shadow: 
                0 0 5px var(--accent-color),
                0 0 10px var(--accent-color);
        }
        
        /* 布局 */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        /* 头部 */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            border-bottom: 1px solid var(--primary-color);
        }
        
        .logo {
            font-size: 2rem;
            font-weight: bold;
            color: var(--primary-color);
        }
        
        nav ul {
            display: flex;
            list-style: none;
        }
        
        nav ul li {
            margin-left: 20px;
        }
        
        nav ul li a {
            color: var(--text-color);
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        nav ul li a:hover {
            color: var(--primary-color);
            text-shadow: 0 0 10px var(--primary-color);
        }
        
        /* 卡片样式 */
        .card {
            background-color: var(--card-bg);
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 
                0 0 10px var(--primary-color),
                0 0 20px var(--primary-color);
        }
        
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--primary-color);
        }
        
        .card-title {
            font-size: 1.5rem;
            color: var(--primary-color);
        }
        
        /* 按钮样式 */
        .btn {
            background: transparent;
            color: var(--text-color);
            border: 2px solid var(--primary-color);
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.3s ease;
            margin: 5px;
        }
        
        .btn:hover {
            background-color: var(--primary-color);
            color: var(--background-color);
            box-shadow: 0 0 15px var(--primary-color);
        }
        
        .btn-accent {
            border-color: var(--accent-color);
            color: var(--accent-color);
        }
        
        .btn-accent:hover {
            background-color: var(--accent-color);
            box-shadow: 0 0 15px var(--accent-color);
        }
        
        /* 表单样式 */
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            color: var(--primary-color);
        }
        
        .form-control {
            width: 100%;
            padding: 10px;
            background-color: rgba(0, 255, 255, 0.1);
            border: 1px solid var(--primary-color);
            border-radius: 5px;
            color: var(--text-color);
        }
        
        .form-control:focus {
            outline: none;
            box-shadow: 0 0 10px var(--primary-color);
        }
        
        /* 仪表板布局 */
        .dashboard {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        
        /* 图表占位符 */
        .chart-placeholder {
            height: 200px;
            background: linear-gradient(45deg, rgba(0, 255, 255, 0.1), rgba(255, 0, 85, 0.1));
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 10px 0;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }
            
            header {
                flex-direction: column;
                text-align: center;
            }
            
            nav ul {
                margin-top: 15px;
                flex-wrap: wrap;
                justify-content: center;
            }
            
            nav ul li {
                margin: 5px 10px;
            }
            
            .dashboard {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 头部导航 -->
        <header>
            <div class="logo neon-text">FinanceApp</div>
            <nav>
                <ul>
                    <li><a href="#dashboard">仪表板</a></li>
                    <li><a href="#bills">账单</a></li>
                    <li><a href="#budgets">预算</a></li>
                    <li><a href="#reports">报表</a></li>
                    <li><a href="#profile">个人资料</a></li>
                </ul>
            </nav>
        </header>
        
        <!-- 仪表板 -->
        <section id="dashboard">
            <div class="card neon-border">
                <div class="card-header">
                    <h2 class="card-title">财务概览</h2>
                    <select class="form-control" style="width: auto;">
                        <option>本月</option>
                        <option>本季度</option>
                        <option>本年</option>
                    </select>
                </div>
                
                <div class="dashboard">
                    <!-- 收入卡片 -->
                    <div class="card neon-border">
                        <h3>总收入</h3>
                        <p style="font-size: 2rem; color: #0f0;">¥12,500</p>
                        <p>较上月 +5.2%</p>
                    </div>
                    
                    <!-- 支出卡片 -->
                    <div class="card neon-border">
                        <h3>总支出</h3>
                        <p style="font-size: 2rem; color: #f00;">¥8,300</p>
                        <p>较上月 +2.1%</p>
                    </div>
                    
                    <!-- 结余卡片 -->
                    <div class="card neon-accent">
                        <h3>结余</h3>
                        <p style="font-size: 2rem; color: var(--accent-color);">¥4,200</p>
                        <p>储蓄率 33.6%</p>
                    </div>
                </div>
                
                <!-- 图表区域 -->
                <h3>支出趋势</h3>
                <div class="chart-placeholder">
                    <p>支出趋势图表</p>
                </div>
                
                <h3>分类支出</h3>
                <div class="chart-placeholder">
                    <p>分类支出饼图</p>
                </div>
            </div>
            
            <!-- 快速操作 -->
            <div class="card neon-border">
                <div class="card-header">
                    <h2 class="card-title">快速操作</h2>
                </div>
                <div style="text-align: center; padding: 20px;">
                    <button class="btn btn-accent" style="font-size: 1.2rem; padding: 15px 30px;">
                        + 记一笔
                    </button>
                </div>
            </div>
        </section>
        
        <!-- 账单管理 -->
        <section id="bills" style="display: none;">
            <div class="card neon-border">
                <div class="card-header">
                    <h2 class="card-title">账单管理</h2>
                    <button class="btn">筛选</button>
                </div>
                
                <div style="display: flex; gap: 10px; margin-bottom: 20px;">
                    <button class="btn">全部</button>
                    <button class="btn">收入</button>
                    <button class="btn">支出</button>
                </div>
                
                <!-- 账单列表 -->
                <div class="card">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <div>
                            <h3>工资收入</h3>
                            <p>2025-10-05</p>
                        </div>
                        <div style="text-align: right;">
                            <p style="color: #0f0; font-size: 1.2rem;">+¥12,000</p>
                            <p>工资</p>
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <div>
                            <h3>超市购物</h3>
                            <p>2025-10-04</p>
                        </div>
                        <div style="text-align: right;">
                            <p style="color: #f00; font-size: 1.2rem;">-¥245.50</p>
                            <p>食品酒水</p>
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <div>
                            <h3>房租</h3>
                            <p>2025-10-01</p>
                        </div>
                        <div style="text-align: right;">
                            <p style="color: #f00; font-size: 1.2rem;">-¥3,500</p>
                            <p>住房</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 预算管理 -->
        <section id="budgets" style="display: none;">
            <div class="card neon-border">
                <div class="card-header">
                    <h2 class="card-title">预算管理</h2>
                    <button class="btn">+ 新建预算</button>
                </div>
                
                <!-- 预算列表 -->
                <div class="card">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <div>
                            <h3>食品酒水</h3>
                            <p>预算: ¥1,500</p>
                        </div>
                        <div style="text-align: right;">
                            <p>已用: ¥1,245.50</p>
                            <p>剩余: ¥254.50</p>
                        </div>
                    </div>
                    <div style="margin-top: 10px; height: 10px; background: rgba(255, 255, 255, 0.1); border-radius: 5px; overflow: hidden;">
                        <div style="width: 83%; height: 100%; background: var(--primary-color);"></div>
                    </div>
                </div>
                
                <div class="card neon-accent">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <div>
                            <h3>交通出行</h3>
                            <p>预算: ¥800</p>
                        </div>
                        <div style="text-align: right;">
                            <p>已用: ¥920.00</p>
                            <p style="color: var(--accent-color);">超支: ¥120.00</p>
                        </div>
                    </div>
                    <div style="margin-top: 10px; height: 10px; background: rgba(255, 255, 255, 0.1); border-radius: 5px; overflow: hidden;">
                        <div style="width: 115%; height: 100%; background: var(--accent-color);"></div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    
    <script>
        // 简单的导航切换功能
        document.addEventListener('DOMContentLoaded', function() {
            const navLinks = document.querySelectorAll('nav a');
            const sections = document.querySelectorAll('section');
            
            navLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    const targetId = this.getAttribute('href').substring(1);
                    
                    // 隐藏所有部分
                    sections.forEach(section => {
                        section.style.display = 'none';
                    });
                    
                    // 显示目标部分
                    document.getElementById(targetId).style.display = 'block';
                });
            });
            
            // 默认显示仪表板
            document.getElementById('dashboard').style.display = 'block';
        });
    </script>
</body>
</html>